﻿
@{
    ViewBag.Title = "EmployeePageList";
    Layout = "~/Views/Shared/_LayoutMain.cshtml";
}
@section css{
    <link rel="stylesheet" href="~/assets/portal/assets/css/common.css" />
    <link rel="stylesheet" href="~/bussiness/js/base/reset.css" />
    <style>
        .ant-select-arrow, .ant-select-clear {
            position: absolute;
            right: 10px;
        }
        .stitle {
            font-size: 16px;
            font-weight: 600;
            color: #424758;
            display: flex;
            margin:6px 0;
            align-items: center;
        }
        .simg :hover{
            cursor:pointer
        }
            .stitle::before {
                content: "";
                margin-right: 10px;
                display: inline-block;
                width: 4px;
                height: 18px;
                background: #0064E5;
            }
            svg{
               fill:red!important;

            }
    </style>
}
<div id="AEDList" class="font-['SourceHanSansSC']">
    <a-style-provider hash-priority="high">
        <a-config-provider :locale="vlocale">

            <header class="px-5 box-border">
                <div class="flex items-center relative">
                    <div class="w-full h-[48px] text-[13px]  rounded-lg mx-auto my-[10px]  bg-white  text-[#888888] text-3xl flex items-center px-10">
                        <div class="w-22 h-22 bg-blue-200 mr-5"> <img class="w-full h-full cursor-pointer" v-on:click="AEDListParams.vvback()" src="~/Assets/nimgs/exit.png" alt="返回" /></div>
                        <span class="text-[]">应急管理<span class="mx-2">/</span><span class="text-[#424758] text-[15px]">AED点位</span> </span>
                    </div>
                </div>
                <a-tabs style="height: 100%; width: 100%; padding: 10px 30px; box-sizing: border-box" type="card" v-on:change="AEDListParams.tchange" v-model:active-key="AEDListParams.cIndex.value" class="w-full h-[48px] text-[13px] rounded-lg  bg-white">
                    <a-tab-pane v-for="(e,i) in AEDListParams.tabList.value" :key="e.value" :tab="e.label">
                        <div class="w-full h-min-[108px] bg-white" style="padding: 10px 10px; box-sizing: border-box; border-radius:6px">
                            <div class="mb-5 text-[16px] font-bold text-black">筛选条件</div>
                            <a-row>
                                <a-form layout="inline"
                                        :model="AEDListParams.queryParams.value">
                                    <a-form-item label="关键字：">
                                        <a-input allow-clear  placeholder="请输入关键字" v-model:value="AEDListParams.queryParams.value.Text"></a-input>
                                    </a-form-item>
                                    <a-form-item>
                                        <a-col><a-button v-on:click="AEDListParams.getTableList(true)" type="primary">查询</a-button></a-col>
                                    </a-form-item>
                                </a-form>
                            </a-row>
                            <div class="flex w-full mt-10">
                                <a-card :bordered="true" class="w-full  mt-12">
                                    <template #title>
                                        <div class="w-full flex justify-between items-center">
                                            <div class="flex items-center"> <div>台账信息</div> <div class="ml-7"><a-tag color="#108ee9">总数:{{ AEDListParams.pagination.value.total }}</a-tag></div></div>
                                            <a-button v-on:click="AEDListParams.toAdd()" type="primary">新增</a-button>
                                        </div>
                                    </template>
                                    <a-table v-on:change="AEDListParams.handleTableChange" :loading="AEDListParams.pagination.value.loading" :pagination="AEDListParams.pagination.value" :data-source="AEDListParams.dataSource.value" :columns="AEDListParams.columns.value">
                                    </a-table>
                                </a-card>
                            </div>
                        </div>
                    </a-tab-pane>
                </a-tabs>
                <a-modal v-model:open="AEDListParams.popShow.value" width="800px" :title="AEDListParams.popType.value?{1:`点位编辑(${AEDListParams.cIndex.value==1?'浦东':'大场'})`,9:`点位详情(${AEDListParams.cIndex.value==1?'浦东':'大场'})`}[AEDListParams.popType.value]:`新增点位(${AEDListParams.cIndex.value==1?'浦东':'大场'})`" v-on:ok="AEDListParams.handleOk">
                    <a-spin :spinning="AEDListParams.pagination.value.loading" tip="加载中，请耐心等待..." />
                    <div class="stitle">地图信息</div>
                    <div style="position:relative;user-select:none" class="simg">
                        <img  v-on:click="AEDListParams.handleMark" ref="img" v-if="AEDListParams.cIndex.value==1" src="../../Bussiness/img/pvgmap.jpg" style="width: 100%" />
                        <img  v-on:click="AEDListParams.handleMark" ref="img" v-else src="../../Bussiness/img/dcArea.jpg" style="width: 100%" />
                        <div v-if="AEDListParams.formData.value.Y&&AEDListParams.formData.value.X" style="position: absolute; width: 18px; height: 18px; " :style="{top:`calc(${AEDListParams.formData.value.Y}% - 12px)`,left:`calc(${AEDListParams.formData.value.X}% - 12px)`}">
                              <img  src="../../Bussiness/img/aed.png" style="width:100%;height:100%"/>
                        </div>
                    </div>
                    <div class="stitle">点位信息</div>
                    <a-row>
                        <a-col :span="23">
                            <a-form ref="formRef"
                                    hide-required-mark
                                    :model="AEDListParams.formData.value"
                                    :rules="AEDListParams.formRules.value"
                                    :label-col="{ span: 4}"
                                    :wrapper-col="{ span: 12 }">
                                <div style="display:flex;justify-content:space-between">
                                    <a-form-item label="地点" name="Place">
                                        <a-input :disabled="AEDListParams.popType.value ==9 " v-model:value="AEDListParams.formData.value.Place" style="width: 300px" />
                                    </a-form-item>
                                    <a-form-item label="位置" name="LocationDetail">
                                        <a-input :disabled="AEDListParams.popType.value ==9 " v-model:value="AEDListParams.formData.value.LocationDetail" style="width: 300px " />
                                    </a-form-item>
                                </div>
                                <div style="display:flex;justify-content:space-between">

                                    <a-form-item label="联系人" name="Contactor">
                                        <a-input :disabled="AEDListParams.popType.value ==9 " v-model:value="AEDListParams.formData.value.Contactor" style="width: 300px " />
                                    </a-form-item>
                                    <a-form-item label="X轴" name="X">
                                        <a-input :disabled="AEDListParams.popType.value ==9 " v-model:value="AEDListParams.formData.value.X" readonly style="width: 300px " />
                                    </a-form-item>
                                </div>
                                <div style="display:flex;justify-content:space-between">


                                    <a-form-item label="号码" name="Phone">
                                        <a-input :disabled="AEDListParams.popType.value ==9 " v-model:value="AEDListParams.formData.value.Phone" style="width: 300px " />
                                    </a-form-item>

                                    <a-form-item label="Y轴" name="Y">
                                        <a-input :disabled="AEDListParams.popType.value ==9 " v-model:value="AEDListParams.formData.value.Y" readonly style="width: 300px " />
                                    </a-form-item>
                                </div>
     
</a-col>
                    </a-row>
</a-modal>
            </header>
        </a-config-provider>
    </a-style-provider>
</div>
@section Js{
    <script src="~/bussiness/js/base/tailwind.js"></script>
    <script type="module">
        import Composition from '../../Bussiness/js/pg/EmergencyManagement/AEDList.js?v=@DateTime.Now.ToString("yyyyMMddHHmmss")'
        import localeValues from '../../Bussiness/js/base/es/locale/zh_CN.js'
        singalApp('AEDList', Composition, localeValues)
    </script>
}
